<template>
	<view class="center">
		<view class="userInfo">
			<image style="width: 150rpx; height: 150rpx; background-color: #eeeeee;border-radius: 100px;" v-if="hasLogin" :src="userData.photo"></image>
			
			<view v-else class="defaultAvatarUrl">
				<uni-icons color="#ffffff" size='50' style="font-size: 50px;" type="person-filled" />
			</view>
			
			<view class="logo-title">
				<text class="uer-name" v-if="hasLogin">{{userData.name}}</text>
				<text class="uer-name" v-else>未登录</text>
			</view>
		</view>
		<view style="margin-top: 10px;">
			<uni-list :border='true'>
				<uni-list-item v-for="(item , index) in ucenterOne" :key="index" :title="item.title" link
					:clickable="true" @click="ucenterListClick(item)" :show-extra-icon="true"
					:extraIcon="{type:item.icon,color:'#4cd964',size:'22'}">
				</uni-list-item>
			</uni-list>
			
			
			 <uni-list>
			 	<uni-list-item title="当前版本"  :show-extra-icon="true" :extraIcon="{type:'sound',color:'#4cd964',size:'22'}" showArrow>
					<template v-slot:footer>
						<view>{{ verSion }}</view>
					</template>
				</uni-list-item>
			</uni-list>
			
			
			<uni-list :border='true' style="margin-top: 5px;;margin-bottom: 5px;">
				<uni-list-item :show-extra-icon="true" :extraIcon="{type:'compose',color:'#4cd964',size:'22'}" showArrow >
					<template v-slot:footer>
						<button class="uni-feedButton" plain="true" open-type="feedback">问题与反馈</button>
					</template>
				</uni-list-item>
			</uni-list>
			<uni-list :border='true'>
				<uni-list-item v-for="(item , index) in ucenterTwo" :key="index" :title="item.title" link
					:clickable="true" @click="ucenterListClick(item)" :show-extra-icon="true"
					:extraIcon="{type:item.icon,color:'#4cd964',size:'22'}">
				</uni-list-item>
			</uni-list>
		</view>
		<view>
			<!-- 提示窗示例 -->
			<uni-popup ref="alertDialog" type="dialog" :mask-background-color="maskColor">
				<uni-popup-dialog :type="msgType" cancelText="取消" confirmText="确定" title="是否确定退出系统？" @confirm="dialogConfirm"
					@close="dialogClose"></uni-popup-dialog>
			</uni-popup>
		</view>
	</view>
</template>

<script>
	import { post, postForm } from '../../utils/request.js';
	export default {
		data() {
			return {
				verSion: '',
				maskColor: 'rgba(0, 0, 0, 0.4)',
				msgType: 'warn',
				extraIcon: {
					color: '#4cd964',
					size: '22',
					type: 'gear-filled'
				},
				hasLogin: true,
				ucenterOne: [
					{
						"title": "个人简介",
						"to": '/pages/center/cenTer',
						"icon": "person"
					},
					{
						"title": "关于我们",
						"to": '',
						"icon": "home"
					}, 
				],
				ucenterTwo: [
					{
						"title": "设置",
						"to": '',
						"icon": "gear"
					},
					/* {
						"title": "修改密码",
						"to": '/pages/center/editPass',
						"icon": "locked"
					}, */
					{
						"title": "退出登录",
						"to": '/pages/login/login',
						"icon": "undo"
					},
				],
				title: '',
                searchQuery: '', // 用户的搜索输入
				userData: {
					name: 'test'
				},
				value: '',
				userInfor: uni.getStorageSync('userInfor'),
                range: [
                    { value: 0, text: "1" },
					{ value: 1, text: "2" },
					{ value: 2, text: "3" },
				],
				current: 3,
				total: 10,
				pageSize: 10,
				FormData: {
					name: '',
					code: '',
					pass: ''
				},
				infoData: [
					{
						name: '第一条问题内容',
					},
					{
						name: '第二条问题内容',
					},{
						name: '第三条问题内容',
					}
				],
				single:  new Date(),
				mediaType: ['image', 'audio']
			}
		},
		onShow() {
			this.userInfor = uni.getStorageSync('userInfor')
			if(uni.getStorageSync('version')) {
				this.verSion = uni.getStorageSync('version')
			}
			this.getData()
		},
		onLoad() {
		},
		methods: {
			clickInter(){
				
			},
			getData() {
				postForm('/user/selectById', {id: this.userInfor.userId} )
				    .then(data => {
						if(data.code == 200) {
							this.userData = data.data
						} else {
							  uni.showToast({
							    icon: 'none',
							    title: data.message
							  });
						}
				    })
				    .catch(err => {
				        uni.showToast({
				           icon: 'none',
				          title: '获取数据失败，请检查接口返回'
				        });
				    });
			},
			ucenterListClick(item) {
				//debugger
				if(item.to == '/pages/login/login') {
					this.$refs.alertDialog.open()
				} else {
					let url = item.to
					uni.navigateTo({
						url
					})
				}
			},
			
			dialogConfirm() {
				console.log('点击确认')
				uni.removeStorageSync('userInfor');
				uni.reLaunch({
					url: '/pages/login/login'
				})
				uni.showToast({
				    title: '退出登录成功',
				    icon: 'none'
				});
			},
			
			dialogClose() {
				console.log('点击关闭')
			},
			  viewInfor() {
				  uni.redirectTo({
				      url: '/pages/position/posAll/viewInfor' // 跳转页面的路径
				  });
			  },
		    change(e) {
				this.single = e
				console.log('change事件:', this.single = e);
						},
			getDate(type) {
				const date = new Date();
				let year = date.getFullYear();
				let month = date.getMonth() + 1;
				let day = date.getDate();
				month = month > 9 ? month : '0' + month;
				day = day > 9 ? day : '0' + day;
				return `${year}-${month}-${day}`;
			},
			maskClick(e){
				console.log('maskClick事件:', e);
			}
		}
	}
</script>

<style>
	.uni-feedButton {
		color: black !important;
		border: 0px !important;
		font-size: 15px !important;
		width: 100% !important;
		text-align: left !important;
		 padding-left: 0px !important;
		 line-height: 20px !important;
	}
	.uni-list-item__content {
	    display: flex;
	    padding-right: 0px !important;
	    flex: 1;
	    color: #3b4144;
	    flex-direction: column;
	    justify-content: space-between;
	    overflow: hidden;
	}
	/* 全局样式或当前页面的样式 */
	.uni-popup__mask {
	  background-color: rgba(0, 0, 0, 0.4) !important; /* 强制覆盖 */
	}
	/* 确保弹框居中 */
.uni-popup-dialog {
	box-shadow: rgba(0, 0, 0, 0.08) 0px 0px 3px 1px;
  position: fixed;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
}
	.page {
		background-color: #f8f8f8;
	}
	.content {
		display: flex;
		flex-direction: column;
		align-items: center;
		justify-content: center;
	}
	.center {
		flex: 1;
		flex-direction: column;
		background-color: #f8f8f8;
	}
	.userInfo {
		/* padding: 20rpx; */
		padding-top: 30px;
		padding-bottom: 30px;
		background-image: url('/static/headers.png');
		flex-direction: column;
		display: flex;
		align-items: center !important; /* 垂直居中 */
		text-align: center;
		justify-content: center !important; /* 水平居中 */
	}
	.defaultAvatarUrl{
		width: 150rpx;
		height: 150rpx;
		background-color: #007aff;
		border-radius: 100%;
		text-align: center;
		align-items: center !important; /* 垂直居中 */
		justify-content: center !important; /* 水平居中 */
	}
	.center-list {
		margin-bottom: 30rpx;
		background-color: #f9f9f9;
	}
	
	.center-list-cell {
		width: 750rpx;
		background-color: #007AFF;
		height: 40rpx;
	}
	/* #endif */
	.item-footer {
		flex-direction: row;
		align-items: center;
	}
	
	.item-footer-text {
		color: #999;
		font-size: 24rpx;
		padding-right: 10rpx;
	}
	
	.item-footer-badge {
		width: 20rpx;
		height: 20rpx;
		/* #ifndef APP-NVUE */
		border-radius: 50%;
		/* #endif */
		/* #ifdef APP-NVUE */
		border-radius: 10rpx;
		/* #endif */
		background-color: #DD524D;
	}
	.uni-text {
		font-size: 18px;
		font-weight: 100;
		color: darkolivegreen;
	}
	.uni-infor {
		font-size: 18px;
		font-weight: 400;
		margin-right: 20px;
	}
	.phon-class {
		 width: 100px;
		height: 125px;
		margin-left: 2px;
		border: 1px solid #8f8f94;
		margin-top: 15px;
	}
	.uni-logo {
		width: 100px;
		height: 125px;
	}
	.uni-list-item text {
		font-size: 15px;
		display: block; /* 确保文字是块级显示 */
		color: #000; /* 设置文字颜色，确保与背景色不同 */
	},
.view-List {
	margin-bottom: 10px;
	margin-top: 20px;
	line-height: 40px;
},
	.text-area{
		margin-top: 100px;
	}
		.form-type-input {
			text-align: left;
		    line-height: 35px;
			font-size: 12px;
		}
	.text-area {
		display: flex;
		justify-content: center;
	}
	.example-body {
		background-color: #fff;
    }
	.title {
		font-size: 36rpx;
		color: #8f8f94;
	}
	
</style>
